<template>
  <div>
    <div class="top">
      <div class="top-log">妩翎衣服装商场</div>
      <div class="top-info">
        <div v-if="user">
          <span style="margin-right: 20px;" @click="dialogVisible = true">{{user.name}}</span>
          
          <span @click="onSignOut">退出登录</span>
        </div>
        <div v-else @click="$router.push({ path: '/login' })">登录账户</div>
      </div>
    </div>
    <div class="top fixed" v-if="isTitle">
      <div class="top-log">妩翎衣服装商场</div>
      <div class="top-title">
        <div :class="isSelect==1?'title-class':''" @click="goPage(1,'index')">首页</div>
        <div :class="isSelect==2?'title-class':''" @click="goPage(2,'gallery')">女性服装</div>
        <div :class="isSelect==3?'title-class':''" @click="goPage(3,'meaty')">男性服装</div>
        <div :class="isSelect==4?'title-class':''" @click="goPage(4,'curing')">服装保养洗涤</div>
        <div :class="isSelect==5?'title-class':''" @click="goPage(5,'information')">新闻资讯</div>
        <!-- <div :class="isSelect==6?'title-class':''" @click="goPage(6,'soil')">土壤知识</div> -->
        <div :class="isSelect==7?'title-class':''" @click="goPage(7,'save')">我的收藏</div>
      </div>
      <div class="top-info">
        <div v-if="user">
          <span style="margin-right: 20px;">{{user.name}}</span>
          <span @click="onSignOut">退出登录</span>
        </div>
        <div v-else @click="$router.push({ path: '/login' })">登录账户</div>
      </div>
    </div>
    <div class="middle">
      <div class="select">
        <div class="select-title">
          <div :class="isSelect==1?'select-class':''" @click="goPage(1,'index')">首页</div>
          <div :class="isSelect==2?'select-class':''" @click="goPage(2,'gallery')">女性服装</div>
          <div :class="isSelect==3?'select-class':''" @click="goPage(3,'meaty')">男性服装</div>
          <div :class="isSelect==4?'select-class':''" @click="goPage(4,'curing')">服装保养洗涤</div>
          <div :class="isSelect==5?'select-class':''" @click="goPage(5,'information')">新闻资讯</div>
          <!-- <div :class="isSelect==6?'select-class':''" @click="goPage(6,'soil')">土壤知识</div> -->
          <div :class="isSelect==7?'select-class':''" @click="goPage(7,'save')">我的收藏</div>
          <div class="select-input">
            <input v-model="searchData" type="text" placeholder="请输入关键字" />
            <span @click="goSearch"></span>
          </div>
        </div>
        <div></div>
      </div>
      <router-view />
    </div>
    <!-- 尾巴 -->
    <div class="tail">
      <div>
        <div>{{tailData.data_one}}</div>
        <div>{{tailData.data_two}}</div>
        <div>{{tailData.data_three}}</div>
      </div>
    </div>

    <!-- 修改信息 -->
    <!-- 对话框 -->
    <el-dialog
    v-if="user"
      title="用户信息"
      :visible.sync="dialogVisible"
      width="40%"
      top="5%"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称" prop="name">
              <el-input clearable placeholder="请输入名称" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户密码" prop="pass">
              <el-input show-password clearable placeholder="请输入密码" v-model="form.pass"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别" prop="gender">
              <el-radio-group clearable v-model="form.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birth">
              <el-date-picker
                clearable
                type="date"
                placeholder="选择日期"
                v-model="form.birth"
                style="width: 100%;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用户邮箱" prop="mail">
          <el-input clearable placeholder="请输入邮箱" v-model="form.mail"></el-input>
        </el-form-item>
        <el-form-item label="所在地址">
          <el-input clearable placeholder="请输入所在地址" type="textarea" v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUser">立即修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get_tailData,up_User } from "@/api/home/api";
export default {
  data() {
    return {
      user:JSON.parse(localStorage.getItem('user')),
      dialogVisible:false,
      isSelect: 1,
      isTitle: false,
      scrollTop: 0,
      tailData: { data_one: "", data_two: "", data_three: "" },
      form: {
        id: "",
        name: "",
        pass: "",
        gender: "",
        birth: "",
        mail: "",
        address: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, message: "长度大于两位", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请选择输入密码", trigger: "blur" },
          { min: 6, message: "长度大于六位", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        birth: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        mail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      },
      searchData:""
    };
  },
  created() {
    this.form=this.user
    this.get_tailData()
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    scrollTop(value) {
      if (value > 120) {
        this.isTitle = true;
        return;
      }
      this.isTitle = false;
    }
  },
  methods: {
    // 保存滚动值，这是兼容的写法
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop, "this.scrollTop");
    },
    // 滚动条回到顶部
    backTop() {
      if (this.scrollTop > 10) {
        document.documentElement.scrollTop = 0;
      }
    },
    goPage(value, path) {
      this.isSelect = value;
      this.$router.push(`/home/${path}`);
    },
    // 退出登录
    onSignOut() {
      let is = confirm(this.user.name + "  用户确认要退出吗！！！！");
      if (is) {
        localStorage.removeItem("user");
        this.$router.push({ path: "/login" });
      }
    },
    get_tailData() {
      get_tailData().then(res => {
        let data = res.data;
        this.tailData = data.dataList[0];
      });
    },
    // 添加或修改用户
    onUser() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          
            up_User(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                localStorage.setItem("user", JSON.stringify(this.form));
                this.$message.success("修改成功！！！");
                this.dialogVisible = false;
              }
            });
        } else {
          return false;
        }
      });
      //
    },
    goSearch(){
      this.$router.push({ path: '/home/search',query: { searchData:this.searchData } })
    }
  }
};
</script>

<style scoped>
.top {
  background: #0ec5a1;
  width: 100%;
  height: 60px;
  display: flex;
  color: rgb(255, 255, 255);
  align-items: center;
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 10;
}
.top-log {
  font-family: "FZShuTi";
  font-size: 38px;
  margin-left: 120px;
}
.top-title {
  display: flex;
  height: 100%;
  font: normal 18px "微软雅黑";
}
.top-title > div {
  cursor: pointer;
  height: 100%;
  line-height: 60px;
  margin: 0 18px;
}
.top-title > div:hover {
  background-color: #0dbd95;
}
.top-info {
  cursor: pointer;
  margin-left: auto;
  margin-right: 20px;
}
.middle {
  margin: 0 11%;
}
.select {
  position: relative;
  border-bottom: 2px solid #e7e8e9;
  height: 60px;
  font-size: 16px;
  color: #595959;
  margin-bottom: 40px;
}
.select-title {
  display: flex;
}
.select-title > div {
  cursor: pointer;
  padding: 0 15px;
  line-height: 60px;
}
.select-title > div:hover {
  border-bottom: 2px solid #0dbd95;
  color: #0dbd95;
}
.select-class {
  border-bottom: 2px solid #0dbd95;
  color: #0dbd95;
}
.title-class {
  background-color: #0dbd95;
}
.select-input {
  width: 30%;
  border-bottom: 2px solid #0dbd95;
  margin-left: auto;
}
.select-input input {
  width: 70%;
  border: none;
  outline: none;
  font: normal 14px "微软雅黑";
  color: #a9a9a9;
}
.select-input span {
  display: inline-block;
  width: 30px;
  height: 24px;
  padding: 0;
  border-right: 1px solid #cecece;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 20px;
  background: url("../../assets/icon/spirit.png") no-repeat -32px 0;
  cursor: pointer;
}
.tail {
  margin-top: 20px;
  height: 120px;
  color: #fff;
  background-color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tail > div {
  text-align: center;
}
.tail > div > div {
  margin-bottom: 3px;
}
</style>